<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header">
    <style>
        /* 全局背景与字体 */
        body {
            background-color: #000 !important;
            color: #efbe02 !important;
        }

        /* 顶部导航栏 */
        .sb-topnav.navbar {
            background-color: #000 !important;
            border-bottom: 1px solid #efbe02 !important;
        }
        .sb-topnav .navbar-brand,
        .sb-topnav .navbar-nav .nav-link {
            color: #efbe02 !important;
        }

        /* 侧边栏 */
        .sb-sidenav {
            background-color: #000 !important;
            border-right: 1px solid #efbe02 !important;
        }
        .sb-sidenav .nav-link,
        .sb-sidenav .sb-sidenav-menu-heading,
        .sb-sidenav-footer {
            color: #efbe02 !important;
        }
        .sb-sidenav .nav-link:hover {
            background-color: rgba(239, 190, 2, 0.2) !important;
        }
        .sb-sidenav .sb-nav-link-icon {
            color: #efbe02 !important;
        }

        /* 内容区域 */
        #layoutSidenav_content {
            background-color: #000 !important;
        }

        /* 卡片通用样式 */
        .card {
            background-color: #1a1a1a !important;
            border: 1px solid #333 !important;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        .card-header {
            color: #efbe02 !important;
            border-bottom: 1px solid #333 !important;
        }

        /* 欢迎卡片样式（已设置黑色背景） */
        .stats-card {
            background-color: #000 !important; /* 黑色背景 */
            border-color: #000 !important; /* 金色边框 */
        }
        .stats-card .card-title {
            color: #efbe02 !important;
        }
        .stats-card .card-value {
            color: #efbe02 !important;
        }

        /* 数据卡片样式 */
        .card-value {
            font-size: 24px;
            font-weight: bold;
        }
        .card-growth {
            color: #4CAF50;
            font-size: 12px;
        }

        /* 页脚样式 */
        footer {
            background-color: #000 !important;
            color: #efbe02 !important;
            border-top: 1px solid #efbe02 !important;
        }
    </style>
</head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="userCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4" th:text="${member.memberName} + '的主页'"></h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item active">主页</li>
                </ol>

                <!-- 欢迎卡片 - 已设置黑色背景 -->
                <div class="row">
                    <style>
                        /* 添加悬停效果 */
                        .card:hover {
                            transform: translateY(-3px);
                            box-shadow: 0 0 30px rgba(239, 190, 2, 0.7); /* 使用金色作为发光颜色 */
                            border-color: rgba(239, 190, 2, 0.5); /* 悬停时边框轻微变亮 */
                        }

                        /* 确保过渡平滑 */
                        .card {
                            will-change: transform, box-shadow;
                        }
                    </style>
                    <div class="col-xl-12">
                        <div class="card mb-4 stats-card" style="background-color: #000; color: #000;">
                            <div class="card-body" style="color: #efbe02;">
                                <h5 class="card-title">你好！</h5>
                                <p class="card-value">尊敬的会员</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Stats Cards -->
                <div class="row">
                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="
                            background-color: #1a1a1a;
                            border: none;
                            border-radius: 10px;
                            transition: transform 0.3s ease, box-shadow 0.3s ease;
                            transform-origin: center;
                        ">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">卡路里消耗</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;">3500卡</p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 12% 本周
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="background-color: #1a1a1a; border: none; border-radius: 10px;">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">会员天数</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;" >45天</p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 100% 总计
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="background-color: #1a1a1a; border: none; border-radius: 10px;">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">健身次数</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;" >12次</p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 8% 本周
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="background-color: #1a1a1a; border: none; border-radius: 10px;">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">课程参与</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;" >5节</p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 15% 本周
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="py-4 mt-auto">
            <div class="container-fluid px-4">
                <div class="d-flex align-items-center justify-content-between small">
                    <div>Copyright &copy; L&Z 2025</div>
                </div>
            </div>
        </footer>
    </div>
</div>

<div th:include="userCommon::common-scripts"></div>
</body>
</html>